<template>
	<view style="width:100%;height:100rpx;"></view>
	<view class="space-between botton" v-if="carListAll">
		<view class="center" @click="disjunctor()">
			<uni-badge class="uni-badge-left-margin" :text="carListAll.nums" absolute="rightTop" :offset="[1, 1]"
				size="small" :customStyle="{background: '#FF1823'}">
				<image :src="integral2" mode="" style="width: 60rpx;height: 60rpx;"></image>
			</uni-badge>
			<view class="center" style="font-size: 26rpx;margin-left:15rpx;">
				<view>合计：</view>
				<view>
					<view>
						蓝宝石：<text style="font-size: 36rpx;color:#5097FB;">{{carListAll.score}}</text>
					</view>
					<view>
						钱包价格：<text style="font-size: 24rpx;">￥</text><text
							style="font-size: 36rpx;">{{carListAll.money}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="but" @click="PlaceOrder()">去兑换</view>
	</view>
	<!-- 商品列表弹框 -->
	<uni-popup ref="shopPop" type="bottom" @maskClick="()=>distor=false">
		<view class="list" v-if="carListAll">
			<view class="bnt" @click="empty()">清空</view>
			<view class="spr">
				<view class="package_sale space-between" v-for="item in carListAll.list"
					style="margin:0px;padding:15rpx 0px" :key="item.id">
					<image :src="item.goods_image" mode="" class="image"></image>
					<view class="direction-start"
						style="width:77%;align-items:normal;justify-content: space-between;height:150rpx">
						<view class="title">{{item.goods_name}}</view>
						<view class="space-between" v-if="item.type==='gem'">
							<view style="font-size: 26rpx;color:#5097FB;">
								蓝宝石：<text style="font-size: 34rpx">{{item.goods_score}}</text>
							</view>
							<view class="center num">
								<text style="border: 1px solid #1B91FF;"
									@click.stop="carDeatil(item.goods_id,1,'gem',item.goods_cid)">-</text>
								<text>{{item.nums}}</text>
								<text style="background: linear-gradient(-66deg, #4E96FB, #65A6FB);"
									@click.stop="carDeatil(item.goods_id,2,'gem',item.goods_cid)">+</text>
							</view>
						</view>
						<view class="space-between" v-if="item.type==='money'">
							<view style="font-size: 26rpx;color: #FE412C;">
								钱包价格：<text style="font-size: 24rpx;">￥</text><text
									style="font-size: 34rpx;">{{item.goods_price}}</text>
							</view>
							<view class="center num">
								<text @click.stop="carDeatil(item.goods_id,1,'money',item.goods_cid)">-</text>
								<text>{{item.nums}}</text>
								<text @click.stop="carDeatil(item.goods_id,2,'money',item.goods_cid)">+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width:100%;height:112rpx;"></view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { navTo } from '@/utils/navigator';
	import { integral2 } from '@/utils/Static';
	import { showLoading, errorToast, successToast } from '@/utils/prompt';
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { toPublish } from '@mqtt';
	import { getCartList } from '@/gql/gemstone';
	import { getDriverID } from '@/stores/driverID';
	import { useUserStore } from '@/stores/user';
	const driver_id = getDriverID();
	const userInfo = useUserStore();
	const emit = defineEmits(['init', 'carDeatil']);
	const shopPop = ref(null)
	const distor = ref(false)
	const carListAll = ref()
	onShow(() => {
		carLisst()
	})
	// 获取购物车信息
	function carLisst() {
		const payload = {
			query: getCartList,
			variables: {
				driver_id,
			},
		};
		toPublish(
			'ql/score/getCartList',
			payload,
			(obj : any) => {
				const { getCartList } = obj.data;
				carListAll.value = getCartList
			}
		);
	}
	function disjunctor() {
		if (carListAll.value.list.length < 1) {
			errorToast('当前购物车还没有商品哦')
			return
		}
		distor.value = !distor.value
		if (distor.value) {
			open()
		} else {
			close()
		}
	}
	// 清空购物车
	function empty() {
		showLoading()
		const payload = {
			driver_id,
		};
		toPublish('score/clearCart',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
					emit('init')
					carLisst()
				} else {
					errorToast(msg)
				}
			}
		);
	}
	// 购物车下单
	function PlaceOrder() {
		if (carListAll.value.list.length < 1) {
			errorToast('当前购物车还没有商品哦')
			return
		}
		showLoading()
		const payload = {
			driver_id,
		};
		toPublish('score/addOrderByCart',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg, data } = obj;
				if (code === 1) {
					successToast(msg)
					emit('init')
					carLisst()
					setTimeout(() => {
						userInfo.gemstone()
						navTo('gemstone/payFor?id=' + data.order_id)
					}, 300)
				} else {
					errorToast(msg)
				}
			}
		);
	}
	function carDeatil(id : number, num : number, type : string, faID : number) {
		emit('carDeatil', id, num, type)
	}

	function open() {
		shopPop.value.open()
	}
	function close() {
		shopPop.value.close()
	}
	defineExpose({ carLisst });
</script>

<style scoped lang="less">
	.image {
		width: 150rpx;
		height: 150rpx;
		background: #F4F6FA;
		border-radius: 5px;
	}

	.title {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.num {
		text:nth-child(odd) {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 48rpx;
			box-sizing: border-box;
		}

		text:nth-last-child(3) {
			border: 1px solid #FF5700;
		}

		text:nth-of-type(2) {
			width: 50rpx;
			text-align: center;
		}

		text:nth-last-child(1) {
			background: linear-gradient(-66deg, #FF5700, #FE0000);
			color: #fff;
		}
	}

	.botton {
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 9999;
		height: 112rpx;
		background: #FFFFFF;
		padding-left: 20rpx;
		box-sizing: border-box;

		.but {
			width: 260rpx;
			height: 112rpx;
			background: linear-gradient(-66deg, #FF7B48, #FF5B45);
			text-align: center;
			line-height: 112rpx;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.list {
		width: 100%;

		.bnt {
			width: 100%;
			height: 60rpx;
			background: #FDF8E2;
			border-radius: 30rpx 30rpx 0px 0px;
			font-size: 24rpx;
			text-align: right;
			padding: 0px 30rpx;
			box-sizing: border-box;
			line-height: 60rpx;
		}

		.spr {
			width: 100%;
			height: 40vh;
			background-color: #fff;
			overflow: auto;
			padding: 20rpx;
			box-sizing: border-box;

			.shop {
				width: 100%;
				padding: 10rpx 0px;
				box-sizing: border-box;
			}
		}
	}
</style>